<template>
  <div class="father" >
     <div class="high">
    <el-steps :active="active" finish-status="success">
      <el-step title="注册信息"></el-step>
      <el-step title="个人信息"></el-step>
    </el-steps>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="form1" v-if="active == 0">
        <el-form-item label="用户名" prop="name">
          <el-input
            type="text"
            v-model="this.ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="this.ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="this.ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="checksex" v-model="this.ruleForm.checked">
          <!-- `checked` 为 true 或 false -->
          <el-radio v-model="this.ruleForm.radio" label="男">男</el-radio>
          <el-radio v-model="this.ruleForm.radio" label="女">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <p style="margin: 0 auto">
          <el-button
            type="primary"
            style="width: 100px"
            @click="submitForm1('ruleForm')"
            >下一步</el-button
          >
        </p>
      </div>

      <div class="form1" v-if="active == 1">
        <el-form-item label="电话号码" prop="phone">
          <el-input
            type="text"
            v-model="this.ruleForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input v-model="this.ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input
            type="text"
            v-model="this.ruleForm.realname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idcard">
          <el-input
            type="text"
            v-model="this.ruleForm.idcard"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-collapse v-model="this.ruleForm.activeNames" @change="handleChange">
          <el-collapse-item style="color: aqua" title="更多" name="1">
            <el-form-item label="公司名称" prop="compony">
              <el-input
                type="text"
                v-model="this.ruleForm.compony"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="position">
              <el-input
                type="text"
                v-model="this.ruleForm.position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="擅长领域" prop="goodat">
              <el-input
                type="text"
                v-model="this.ruleForm.goodat"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-config-provider :locale="locale">
                <el-date-picker
                  v-model="this.ruleForm.birthday"
                  type="date"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  :locale="locale"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-config-provider>
            </el-form-item>

            <el-form-item label="所在地" prop="location">
              <el-cascader
                v-model="ruleForm.location"
                :options="options"
                :show-all-levels="false"
                filterable
              ></el-cascader>
              <!-- <el-input v-model="input" disabled placeholder="input" /> -->
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

        <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <p style="margin: 0 auto">
          <el-button
            type="primary"
            style="width: 100px"
            @click="submitForm2('ruleForm')"
            >上一步</el-button
          >

          <el-button
            type="primary"
            style="width: 100px"
            @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </p>
      </div>
    </el-form>
  </div>
  </div>
 
</template>

<style scoped> 
.father{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* background-color: rgb(240, 233, 222); */
}
  .high{
    position: absolute;
    left: 30%;
    width: 500px;
    
  }
  .form1{
    width: 520px;
    position: absolute;
    top: 90px;
    /* border: 1px solid; */
  }
  :deep(.el-form-item__content){
   
    height:40px;

  }
  :deep(el-input__inner){
     /* background-color: antiquewhite; */
    height: 20px;
    width: 80%;
  }
  :deep(.el-input){
    width: 80%;
    height: 40px;
    color: rgb(35, 31, 31);
  }
  :deep(.el-button){
    position: absolute;
    left: 65%;
    border: 1px solid saddlebrown;
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24);
    color: rgb(58, 52, 52);
    border-radius: 8px;
  }
  /* 输入框 */
  :deep(.el-input__wrapper){
    background-color: rgb(249, 249, 250);
    border: 1px solid saddlebrown;
  }
</style>


<script>
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validateCAPTCHA = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    var validatephone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        callback();
      }
    };
    var validaterealname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入真实姓名"));
      } else {
        callback();
      }
    };
    var validateidcard = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入身份证号码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "", //用户名
        pass: "",
        checkPass: "",
        checked: "",
        radio: "男",
        email: "",
        birthday: "", //出生日期
        CAPTCHA: "", //验证码
        phone: "",
        realname: "", //真实姓名
        idcard: "", //身份证号
        activeNames: ["1"],
        compony: "",
        position: "",
        goodat: "",
        location: "",
      },
      rules: {
        name: [{ required: true, validator: validateName, trigger: "blur" }],
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
            message: "至少6个字符，至少一个字母和一个数字",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
            message: "至少6个字符，至少一个字母和一个数字",
            trigger: "blur",
          },
        ],

        // -----------------------------------

        phone: [
          { required: true, validator: validatephone, trigger: "blur" },
          { pattern: /^1\d{10}$/, message: "手机格式不正确", trigger: "blur" },
        ],
        realname: [
          { required: true, validator: validaterealname, trigger: "blur" },
        ],
        idcard: [
          { required: true, validator: validateidcard, trigger: "blur" },
          {
            pattern:
              /(^[1-9]\d{5}(((1[89]|20)\d{2}(((0[13578]|1[0-2])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8]))))|((((1[89]|20)(0[48]|[2468][048]|[13579][26]))|((19|20)00))0229))\d{3}(\d|X|x)$)/,
            message: "身份证格式不正确",
            trigger: "blur",
          },
        ],
        CAPTCHA: [
          { required: true, validator: validateCAPTCHA, trigger: "blur" },
        ],
      },
      // input: returnCitySN['cname'],
      active: 0,
      options: [
        {
          value: "BeiJing",
          label: "北京",
        },
        {
          value: "ShangHai",
          label: "上海",
        },
        {
          value: "TianJin",
          label: "天津",
        },
        {
          value: "ChongQing",
          label: "重庆",
        },
        {
          value: "XiangGang",
          label: "香港",
        },
        {
          value: "AoMen",
          label: "澳门",
        },
        {
          value: "HeNan",
          label: "河南省",
          children: [
            { value: "zhengzhou", label: "郑州市" },
            { value: "luoyang", label: "洛阳市" },
            { value: "jiaozuo", label: "焦作市" },
            { value: "shangqiu", label: "商丘市" },
            { value: "xinyang", label: "信阳市" },
            { value: "zhoukou", label: "周口市" },
            { value: "hebi", label: "鹤壁市" },
            { value: "anyang", label: "安阳市" },
            { value: "puyang", label: "濮阳市" },
            { value: "zhumadian", label: "驻马店市" },
            { value: "nanyang", label: "南阳市" },
            { value: "kaifeng", label: "开封市" },
            { value: "luohe", label: "漯河市" },
            { value: "xuchang", label: "许昌市" },
            { value: "xinxiang", label: "新乡市" },
            { value: "sanmenxia", label: "三门峡市" },
            { value: "pingdingshan", label: "平顶山市" },
          ],
        },
        {
          value: "HeBei",
          label: "河北省",
          children: [
            { value: "shijiazhuang", label: "石家庄市" },
            { value: "zhangjiakou", label: "张家口市" },
            { value: "chengde", label: "承德市" },
            { value: "tangshan", label: "唐山市" },
            { value: "qinhuangdao", label: "秦皇岛市" },
            { value: "langfang", label: "廊坊市" },
            { value: "baoding", label: "保定市" },
            { value: "cangzhou", label: "沧州市" },
            { value: "hengshui", label: "衡水市" },
            { value: "xingtai", label: "邢台市" },
            { value: "handan", label: "邯郸市" },
          ],
        },
        {
          value: "ShanXi",
          label: "山西省",
          children: [
            { value: "taiyuan", label: "太原市" },
            { value: "datong", label: "大同市" },
            { value: "shuozhou", label: "朔州市" },
            { value: "xinzhou", label: "忻州市" },
            { value: "yangquan", label: "阳泉市" },
            { value: "jinzhong", label: "晋中市" },
            { value: "lvliang", label: "吕梁市" },
            { value: "changzhi", label: "长治市" },
            { value: "linfen", label: "临汾市" },
            { value: "jincheng", label: "晋城市" },
            { value: "yuncheng", label: "运城市" },
          ],
        },
        {
          value: "NeiMeng",
          label: "内蒙古自治区",
          children: [
            { value: "hhht", label: "呼和浩特市" },
            { value: "hlbe", label: "呼伦贝尔市" },
            { value: "tongliao", label: "通辽市" },
            { value: "chifneg", label: "赤峰市" },
            { value: "byne", label: "巴彦淖尔市" },
            { value: "wlcb", label: "乌兰察布市" },
            { value: "baotou", label: "包头市" },
            { value: "eeds", label: "鄂尔多斯市" },
            { value: "wuhai", label: "乌海市" },
          ],
        },
        {
          value: "HeiLong",
          label: "黑龙江省",
          children: [
            { value: "haerbin", label: "哈尔滨市" },
            { value: "heihe", label: "黑河市" },
            { value: "yichun", label: "伊春市" },
            { value: "qqhe", label: "齐齐哈尔市" },
            { value: "hegang", label: "鹤岗市" },
            { value: "jiamusi", label: "佳木斯市" },
            { value: "shuangyashan", label: "双鸭山市" },
            { value: "suihua", label: "绥化市" },
            { value: "daqing", label: "大庆市" },
            { value: "qitaihe", label: "七台河市" },
            { value: "jixi", label: "鸡西市" },
            { value: "mudanjiang", label: "牡丹江市" },
          ],
        },
        {
          value: "JiLin",
          label: "吉林省",
          children: [
            { value: "changchun", label: "长春市" },
            { value: "baicheng", label: "白城市" },
            { value: "songyuan", label: "松原市" },
            { value: "jilin", label: "吉林市" },
            { value: "siping", label: "四平市" },
            { value: "liaoyuan", label: "辽源市" },
            { value: "baishan", label: "白山市" },
            { value: "tonghua", label: "通化市" },
          ],
        },
        {
          value: "LiaoNing",
          label: "辽宁省",
          children: [
            { value: "shenyang", label: "沈阳市" },
            { value: "tieling", label: "铁岭市" },
            { value: "fuxin", label: "阜新市" },
            { value: "fushun", label: "抚顺市" },
            { value: "chaoyang", label: "朝阳市" },
            { value: "benxi", label: "本溪市" },
            { value: "liaoyang", label: "辽阳市" },
            { value: "anshan", label: "鞍山市" },
            { value: "panjin", label: "盘锦市" },
            { value: "jinzhou", label: "锦州市" },
            { value: "huludao", label: "葫芦岛市" },
            { value: "yingkou", label: "营口市" },
            { value: "dandong", label: "丹东市" },
            { value: "dalian", label: "大连市" },
          ],
        },
        {
          value: "JiangSu",
          label: "江苏省",
          children: [
            { value: "nanjing", label: "南京市" },
            { value: "lianyungang", label: "连云港市" },
            { value: "xuzhou", label: "徐州市" },
            { value: "suqian", label: "宿迁市" },
            { value: "huaian", label: "淮安市" },
            { value: "yancheng", label: "盐城市" },
            { value: "taizhou", label: "泰州市" },
            { value: "yangzhou", label: "扬州市" },
            { value: "zhenjiang", label: "镇江市" },
            { value: "nantong", label: "南通市" },
            { value: "changzhou", label: "常州市" },
            { value: "wuxi", label: "无锡市" },
            { value: "suzhou", label: "苏州市" },
          ],
        },
        {
          value: "ZheJiang",
          label: "浙江省",
          children: [
            { value: "hangzhou", label: "杭州" },
            { value: "huzhou", label: "湖州市" },
            { value: "jiaxing", label: "嘉兴市" },
            { value: "shaoxing", label: "绍兴市" },
            { value: "zhoushan", label: "舟山市" },
            { value: "ningbo", label: "宁波市" },
            { value: "jinhua", label: "金华市" },
            { value: "quzhou", label: "衢州市" },
            { value: "taizhou", label: "台州市" },
            { value: "lishui", label: "丽水市" },
            { value: "wenzhou", label: "温州市" },
          ],
        },
        {
          value: "AnHui",
          label: "安徽省",
          children: [
            { value: "hefei", label: "合肥市" },
            { value: "huaibei", label: "淮北市" },
            { value: "haozhou", label: "毫州市" },
            { value: "suzhou", label: "宿州市" },
            { value: "bengbu", label: "蚌埠市" },
            { value: "fuyang", label: "阜阳市" },
            { value: "huainan", label: "淮南市" },
            { value: "chuzhou", label: "滁州市" },
            { value: "liuan", label: "六安市" },
            { value: "maanshan", label: "马鞍山市" },
            { value: "wuhu", label: "芜湖市" },
            { value: "xuancheng", label: "宣城市" },
            { value: "tongling", label: "铜陵市" },
            { value: "chizhou", label: "池州市" },
            { value: "anqing", label: "安庆市" },
            { value: "huangshan", label: "黄山市" },
          ],
        },
        {
          value: "FuJian",
          label: "福建省",
          children: [
            { value: "fuzhou", label: "福州市" },
            { value: "ningde", label: "宁德市" },
            { value: "nanping", label: "南平市" },
            { value: "sanming", label: "三明市" },
            { value: "putian", label: "莆田市" },
            { value: "longyan", label: "龙岩市" },
            { value: "quanzhou", label: "泉州市" },
            { value: "zhangzhou", label: "漳州市" },
            { value: "xiamen", label: "厦门市" },
          ],
        },
        {
          value: "JiangXi",
          label: "江西省",
          children: [
            { value: "nanchang", label: "南昌市" },
            { value: "jiujiang", label: "九江市" },
            { value: "jingdezhen", label: "景德镇市" },
            { value: "shangrao", label: "上饶市" },
            { value: "yingtan", label: "鹰潭市" },
            { value: "fuzhou", label: "抚州市" },
            { value: "xinyu", label: "新余市" },
            { value: "yichun", label: "宜春市" },
            { value: "pingxiang", label: "萍乡市" },
            { value: "jian", label: "吉安市" },
            { value: "ganzhou", label: "赣州市" },
          ],
        },
        {
          value: "ShanDong",
          label: "山东省",
          children: [
            { value: "jinan", label: "济南市" },
            { value: "dezhou", label: "德州市" },
            { value: "binzhou", label: "滨州市" },
            { value: "dongying", label: "东营市" },
            { value: "yantai", label: "烟台市" },
            { value: "weihai", label: "威海市" },
            { value: "zibo", label: "淄博市" },
            { value: "weifang", label: "潍坊市" },
            { value: "liaocheng", label: "聊城市" },
            { value: "taian", label: "泰安市" },
            { value: "laiwu", label: "莱芜市" },
            { value: "qingtao", label: "青岛市" },
            { value: "rizhao", label: "日照市" },
            { value: "jining", label: "济宁市" },
            { value: "heze", label: "菏泽市" },
            { value: "linyi", label: "临沂市" },
            { value: "zaozhuang", label: "枣庄市" },
          ],
        },
        {
          value: "HuBei",
          label: "湖北省",
          children: [
            { value: "wuhan", label: "武汉市" },
            { value: "shiyan", label: "十堰市" },
            { value: "xiangfan", label: "襄樊市" },
            { value: "suizhou", label: "随州市" },
            { value: "jingzhou", label: "荆州市" },
            { value: "xiaogan", label: "孝感市" },
            { value: "yichang", label: "宜昌市" },
            { value: "huanggang", label: "黄冈市" },
            { value: "ezhou", label: "鄂州市" },
            { value: "jingzhou", label: "荆州市" },
            { value: "huangshi", label: "黄石市" },
            { value: "xianning", label: "咸宁市" },
          ],
        },
        {
          value: "HuNan",
          label: "湖南省",
          children: [
            { value: "changsha", label: "长沙市" },
            { value: "yueyang", label: "岳阳市" },
            { value: "zhangjaijie", label: "张家界市" },
            { value: "changde", label: "常德市" },
            { value: "yiyang", label: "益阳市" },
            { value: "xiangtan", label: "湘潭市" },
            { value: "zhuzhou", label: "株洲市" },
            { value: "loudi", label: "娄底市" },
            { value: "huaihua", label: "怀化市" },
            { value: "shaoyang", label: "邵阳市" },
            { value: "hengyang", label: "衡阳市" },
            { value: "yongzhou", label: "永州市" },
            { value: "chenzhou", label: "郴州市" },
          ],
        },
        {
          value: "广东省",
          label: "广东省",
          children: [
            { value: "广州市", label: "广州市" },
            { value: "韶关市", label: "韶关市" },
            { value: "梅州市", label: "梅州市" },
            { value: "河源市", label: "河源市" },
            { value: "清远市", label: "清远市" },
            { value: "潮州市", label: "潮州市" },
            { value: "揭阳市", label: "揭阳市" },
            { value: "汕头市", label: "汕头市" },
            { value: "肇庆市", label: "肇庆市" },
            { value: "惠州市", label: "惠州市" },
            { value: "佛山市", label: "佛山市" },
            { value: "东莞市", label: "东莞市" },
            { value: "云浮市", label: "云浮市" },
            { value: "汕尾市", label: "汕尾市" },
            { value: "江门市", label: "江门市" },
            { value: "中山市", label: "中山市" },
            { value: "深圳市", label: "深圳市" },
            { value: "珠海市", label: "珠海市" },
            { value: "阳江市", label: "阳江市" },
            { value: "茂名市", label: "茂名市" },
            { value: "湛江市", label: "湛江市" },
          ],
        },
        {
          value: "广西壮族自治区 ",
          label: "广西壮族自治区",
          children: [
            { value: "南宁市", label: "南宁市" },
            { value: "桂林市", label: "桂林市" },
            { value: "河池市", label: "河池市" },
            { value: "贺州市", label: "贺州市" },
            { value: "柳州市", label: "柳州市" },
            { value: "百色市", label: "百色市" },
            { value: "来宾市", label: "来宾市" },
            { value: "梧州市", label: "梧州市" },
            { value: "贵港市", label: "贵港市" },
            { value: "玉林市", label: "玉林市" },
            { value: "崇左市", label: "崇左市" },
            { value: "钦州市", label: "钦州市" },
            { value: "防城港市", label: "防城港市" },
            { value: "北海市", label: "北海市" },
          ],
        },
        {
          value: "新疆维吾尔自治区",
          label: "新疆维吾尔自治区",
          children: [
            { value: "乌鲁木齐市", label: "乌鲁木齐市" },
            { value: "克拉玛依市", label: "克拉玛依市" },
            { value: "吐鲁番市", label: "吐鲁番市" },
            { value: "哈密市", label: "哈密市" },
          ],
        },
        {
          value: "宁夏回族自治区",
          label: "宁夏回族自治区",
          children: [
            { value: "银川市", label: "银川市" },
            { value: "克拉玛依市", label: "克拉玛依市" },
            { value: "吴忠市", label: "吴忠市" },
            { value: "中卫市", label: "中卫市" },
            { value: "固原市", label: "固原市" },
          ],
        },
        {
          value: "青海省",
          label: "青海省",
          children: [
            { value: "西宁市", label: "西宁市" },
            { value: "海东市", label: "海东市" },
          ],
        },
        {
          value: "甘肃省",
          label: "甘肃省",
          children: [
            { value: "兰州市", label: "兰州市" },
            { value: "嘉谷关市", label: "嘉谷关市" },
            { value: "酒泉市", label: "酒泉市" },
            { value: "张掖市", label: "张掖市" },
            { value: "金昌市", label: "金昌市" },
            { value: "武威市", label: "武威市" },
            { value: "白银市", label: "白银市" },
            { value: "庆阳市", label: "庆阳市" },
            { value: "平凉市", label: "平凉市" },
            { value: "定西市", label: "定西市" },
            { value: "天水市", label: "天水市" },
            { value: "陇南市", label: "陇南市" },
          ],
        },
        {
          value: "陕西省",
          label: "陕西省",
          children: [
            { value: "西安市", label: "西安市" },
            { value: "榆林市", label: "榆林市" },
            { value: "延安市", label: "延安市" },
            { value: "铜川市", label: "铜川市" },
            { value: "weinan", label: "渭南市" },
            { value: "宝鸡市", label: "宝鸡市" },
            { value: "咸阳市", label: "咸阳市" },
            { value: "商洛市", label: "商洛市" },
            { value: "汉中市", label: "汉中市" },
            { value: "安康市", label: "安康市" },
          ],
        },
        {
          value: "西藏自治区",
          label: "西藏自治区",
          children: [
            { value: "拉萨市", label: "拉萨市" },
            { value: "日喀则市", label: "日喀则市" },
            { value: "昌都市", label: "昌都市" },
            { value: "林芝市", label: "林芝市" },
            { value: "山南市 ", label: "山南市" },
            { value: "那曲市", label: "那曲市" },
          ],
        },
        {
          value: "云南省",
          label: "云南省",
          children: [
            { value: "昆明市", label: "昆明市" },
            { value: "昭通市", label: "昭通市" },
            { value: "丽江市", label: "丽江市" },
            { value: "曲靖市", label: "曲靖市" },
            { value: "保山市", label: "保山市" },
            { value: "玉溪市", label: "玉溪市" },
            { value: "临沧市", label: "临沧市" },
            { value: "普洱市 ", label: "普洱市" },
          ],
        },
        {
          value: "贵州省",
          label: "贵州省",
          children: [
            { value: "贵阳市", label: "贵阳市" },
            { value: "遵义市", label: "遵义市" },
            { value: "六盘水市", label: "六盘水市" },
            { value: "安顺市", label: "安顺市" },
            { value: "铜仁市", label: "铜仁市" },
            { value: "毕节市 ", label: "毕节市" },
          ],
        },
        {
          value: "四川省",
          label: "四川省",
          children: [
            { value: "成都市", label: "成都市" },
            { value: "广元市", label: "广元市" },
            { value: "巴中市", label: "巴中市" },
            { value: "绵阳市", label: "绵阳市" },
            { value: "德阳市", label: "德阳市" },
            { value: "达州市", label: "达州市" },
            { value: "南充市", label: "南充市" },
            { value: "遂宁市", label: "遂宁市" },
            { value: "广安市", label: "广安市" },
            { value: "资阳市", label: "资阳市" },
            { value: "眉山市", label: "眉山市" },
            { value: "雅安市", label: "雅安市" },
            { value: "内江市  ", label: "内江市" },
            { value: "乐山市", label: "乐山市" },
            { value: "自贡市", label: "自贡市" },
            { value: "泸州市 ", label: "泸州市" },
            { value: "宜宾市", label: "宜宾市" },
            { value: "攀枝花市", label: "攀枝花市" },
          ],
        },
        {
          value: "海南省",
          label: "海南省",
          children: [
            { value: "海口市", label: "海口市" },
            { value: "三亚市", label: "三亚市" },
            { value: "三沙市", label: "三沙市" },
            { value: "儋州市", label: "儋州市" },
          ],
        },
      ],
      label: "",
      locale:zhCn,
    };
  },
  methods: {
    submitForm1(formName) {
      //下一步
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");

          this.active++;
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2() {
      //上一步
      this.active--;
    },
    submitForm(formName) {
      //提交
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //发送ajax请求
          let aaa = {
            //传入变量
            userName: this.ruleForm.name, //用户名
            idcard: this.ruleForm.idcard, //身份证号
            phone: this.ruleForm.phone,
            email: this.ruleForm.email,
            sex: this.ruleForm.radio,
            compony: this.ruleForm.compony,
            position: this.ruleForm.position,
            goodat: this.ruleForm.goodat,
            realName: this.ruleForm.realname, //真实姓名
            birthday: this.ruleForm.birthday, //出生日期
            location: this.ruleForm.location[1]
            // userName: "城北徐公",
            // idcard: "450721200007068156",
            // phone: "13132675486",
            // email: "1233@qq.com",
            // sex: "",
            // compony: "滴滴代喝",
            // position: "业务员",
            // goodat: "民族文化",
            // realName: "彭于晏",
            // birthday: "2000-02-02",
            // location: "北京",
          };
          let bbb = {
            //传入变量
            userName: this.ruleForm.name, //用户名
            password:this.ruleForm.pass,
            sex: this.ruleForm.radio,
            phone: this.ruleForm.phone,
            email: this.ruleForm.email,
            realName: this.ruleForm.realname, //真实姓名
            idcard: this.ruleForm.idcard, //身份证号
            compony: this.ruleForm.compony,
            position: this.ruleForm.position,
            goodat: this.ruleForm.goodat,
            birthday: this.ruleForm.birthday, //出生日期
            location: this.ruleForm.location[1]
            
          };
          //使用
          let { data } = await this.$http.post("/register", aaa);
          console.log(aaa);

          if (data == 1) {
            // let { data :{data:re}} = await this.$http.post("/add", bbb);
            console.log(re);
            if(re){
              alert("恭喜您注册成功!");
            console.log(re);
            }else{
              console.log("注册失败");
            }
            
          } else {
            alert("用户名或手机号或身份证号或邮箱已被注册，注册失败！");
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      //重置
      this.$refs[formName].resetFields();
    },
    handleChange(val) {
      //展开更多
      // console.log(val);
    },
  },
};
</script>

